<!-- 个人中心 -->
<template>
	<view style="margin:30rpx  20rpx;">
		<!-- //标题 -->
		<view style="font-size: 34rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;font-weight: bold;color: #333333;line-height: 44rpx;padding: 30rpx;">{{infoData.title}}</view>
		<!-- //信息栏 头像 昵称 时间 -->
	<!-- 	<view style="display: flex;flex-direction: row;margin: 30rpx 0;align-items: center;">
			<image src="/static/image/fenxiao73.png" style="width: 40rpx;height: 40rpx;"></image>
			<view style="margin-left:20rpx;margin-right: 30rpx;">云淡风轻</view>
			<view style="color: #CCCCCC;">{{infoData.createtime}}</view>
		</view> -->
		<!-- //正文内容 -->
		<view style="margin-bottom: 40rpx;">
			<view class="content">
				<view class="" style="padding-bottom: 10rpx;">
					{{infoData.info}}
				</view>
			
			<!-- 	//相关图片 -->
			
			<image  mode="widthFix" style="width: 100%;" v-for="(item, index) in infoData.imgs_arr" :key="index" :src="'https://huboshizb.bigchun.com' + item"></image>

			</view>
			

			
			<!-- <view class="btn">展开</view> -->
		</view>
		
		
		
		<!-- //评论内容 -->
		<!-- <view style="border-top: 1px solid #EEEEEE;padding-left: 80rpx;"> -->
			<!-- <view v-for="item in infoData.comment"> -->
				<!-- //信息栏 -->
			<!-- 	<view style="display: flex;flex-direction: row;margin: 30rpx 0;align-items: center;">
					<image src="/static/image/fenxiao73.png" style="width: 40rpx;height: 40rpx;"></image>
					<view style="margin-left:20rpx;margin-right: 30rpx;">胡博士回复</view>
					<view style="color: #CCCCCC;">{{infoData.createtime}}</view>
				</view> -->
				<!-- //内容 -->
			<!-- 	<view style="background: #FEF3F3;border-radius: 0px 0px 0px 0px;opacity: 1;padding: 10px;">
					{{item.comment}}
				</view> -->
			<!-- </view> -->
		<!-- </view> -->
	<!-- 	<view style="display: flex;justify-content: flex-end;margin-top: 100rpx;">
			<view style="border: 1px solid #FF6D02;width: 60px; border-radius: 20px;line-height: 30px;color: #DE2415;">回复</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoData: {
					// "id": 1,
					// "uid": 1,
					// "title": "我买来一套查罗石配饰，想让专家帮忙看下真假，价值多少？",
					// "info": "昨天刚买回来的，拍的照片还行，没有太大的色差，就买了下来，主要是想看看这套配饰是否有收藏价值？昨天刚买回来的，拍的照片还行，没有太大的色差，就买了下来，主要是想看看这套配饰是否有收藏价值？昨天刚买回来的，拍的照片还行，没有太大的色差，就买了下来，主要是想看看这套配饰是否有收藏价值？…",
					// "imgs": "/",
					// "createtime": 1661084015,
					// "updatetime": 1661084015,
					// "fabulous_sum": 1,
					// "comment_sum": 1,
					// "collection_sum": 1,
					// "money": "0.00",
					// "reward_sum": 0,
					// "comment": [{
					// 		"id": 1,
					// 		"user_id": 1,
					// 		"inquiry_problem_id": 1,
					// 		"comment": "web",
					// 		"createtime": 1660556965,
					// 		"updatetime": 1660556965,
					// 		"username": "admin"
					// 	},
					// 	{
					// 		"id": 2,
					// 		"user_id": 3,
					// 		"inquiry_problem_id": 1,
					// 		"comment": "1212",
					// 		"createtime": null,
					// 		"updatetime": null,
					// 		"username": "17637502443"
					// 	}
					// ]
				},
			}
		},
		onLoad(options) {
			console.log('options', options)
			this.getData(options.id)
		},
		onShow() {

		},
		computed: {

		},
		methods: {
			getData(id) {
				this.$api.inquiryDetail({
					problem_id: id
				}).then(res => {
					this.infoData = res.data
					this.infoData.imgs_arr = this.infoData.imgs.split(',')
					console.log(this.infoData.imgs_arr);
				})
			}
		},
	}
</script>
<style>
    page {
        height: 100% !important;
        min-height: 100% !important;
        background: #F5F5F5 !important;
    }
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
        
	}

	.content{
     // height: 996rpx;
     background: #FFFFFF;
     border-radius: 28rpx;
     padding: 30rpx;
		// width: 690px;
		// height: 132px;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 45rpx;
		// display: -webkit-box;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// // text-align: justify;
		// -webkit-line-clamp: 3;
		// -webkit-box-orient: vertical;
	}
	// .content::before{
	// 	  content: '展开';
	// 	  float: right;
	// 	  width: 0; /*设置为0，或者不设置宽度*/
	// 	  height: 50px;/*先随便设置一个高度*/
	// }
	.text {
	  font-size: 20px;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  text-align: justify;
	  /* display: flex; */
	  display: -webkit-box;
	  -webkit-line-clamp: 3;
	  -webkit-box-orient: vertical;
	  position: relative;
	}
	.text::before {
	  content: '';
	  height: calc(100% - 24px);
	  float: right;
	}
	.text::after {
	  content: '';
	  width: 999vw;
	  height: 999vw;
	  position: absolute;
	  box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
	    margin-left: -100px;
	}
	.btn{
	  float: right;
	  clear: both;
	  margin-left: 10px;
	  font-size: 16px;
	  padding: 0 8px;
	  // background: #DE2415;
	  line-height: 24px;
	  border-radius: 4px;
	  color:  #DE2415;
	  cursor: pointer;
	  /* margin-top: -30px; */
	}
	.btn::before{
	  content:''
	}
	.exp{
	  display: none;
	}
	.exp:checked+.text{
	  -webkit-line-clamp: 999;
	}
	.exp:checked+.text::after{
	  visibility: hidden;
	}
	.exp:checked+.text .btn::before{
	  content:'收起'
	}
</style>
